<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2>Product Details</h2>
          <ul>
            <li class="active">
              <router-link :to="{name:'viewCatalog',query:{catId: catId}}">Catalog</router-link>
            </li>
            <li class="active">
              <router-link :to="{name:'viewProduct',query:{productId: productId}}">Product</router-link>
            </li>
            <li class="active">Item</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="shop-area pt-95 pb-150">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-6">
            <div class="product-details-img" style="height: 400px;width: 350px;left: 120px;position: relative">
              <img id="zoompro" :src="item.image" data-zoom-image="item.image" alt="zoom">
              <div id="gallery" class="mt-12 product-dec-slider owl-carousel">
                <a data-image="item.image" data-zoom-image="item.image">
                  <img src="item.image" alt=""></a>
                <a data-image="item.image" data-zoom-image="item.image">
                  <img src="item.image" alt=""></a>
                <a data-image="item.image" data-zoom-image="item.image">
                  <img src="item.image" alt=""></a>
                <a data-image="item.image" data-zoom-image="item.image">
                  <img src="item.image" alt=""></a>
                <a data-image="item.image" data-zoom-image="item.image">
                  <img src="item.image" alt=""></a>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6">
            <div class="product-details-content">
              <h1>{{ item.name }}</h1>
              <div class="product-rating">
                <i class="ti-star theme-color "></i>
                <i class="ti-star theme-color"></i>
                <i class="ti-star theme-color"></i>
                <i class="ti-star"></i>
                <i class="ti-star"></i></div>
              <div class="product-price"><span class="new">${{ item.nowPrice }}</span><span
                class="old">${{ item.oldPrice }}</span></div>
              <div style="height: 60px;"></div>
              <p style="height: 100px">{{ item.descn }}</p>
                <div class="quality-wrapper mt-30 product-quantity" style="left: 140px;position: relative"><label>Qantity:</label>
                  <div class="cart-plus-minus">
                    <div class="dec qtybutton">-</div>
                    <input class="cart-plus-minus-box" type="text" name="qtybutton" value="1">
                    <div class="inc qtybutton">+</div>
                  </div>
                </div>

              <div class="product-list-action">
                <div class="product-list-action-left" style="left: 140px;position: relative" >
                  <a class="addtocart-btn" title="Add to cart" @click="addCart">
                    <i class="ion-bag" ></i> Add to cart</a>
                </div>
                <div class="product-list-action-right" @click="addWish(item.itemId)">
                  <img style="width: 58px;height:38px;" :src="heartimg" @click="addWish(item.itemId)"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="description-review-area pb-100">
      <div class="container">
        <div class="description-review-wrapper gray-bg pt-40">
          <div class="description-review-topbar nav text-center">
            <a class="active" data-toggle="tab" href="#des-details1">DESCRIPTION</a>
            <a data-toggle="tab" href="#des-details2">MORE INFORMATION</a>
            <a data-toggle="tab" href="#des-details3">REVIEWS</a></div>
          <div class="tab-content description-review-bottom">
            <div id="des-details1" class="tab-pane active">
              <div class="product-description-wrapper">
                <p>This stewpot is part of the Scanpan Classic cookware range, which boasts GreenTek
                  non-stick coating which is 100% PFOA free, meaning it's safer for your family and the
                  environment. The heavy-duty, pressure-cast aluminum body has an extra-thick base for
                  quick, even heating and it is compatible with all cooking surfaces (excluding
                  induction). The extraordinarily hard exterior surface is a combination of ceramic and
                  titanium nonstick cooking surface which is impossible to scrape away, even with metal
                  utensils. Patented spring-lock handle stays cool during normal stove top use and the
                  stewpot is also oven safe from up to 260°C. It's also dishwasher safe for easy cleanup.
                </p>
                <p>Scanpan is designed and manufactured in Denmark and offers a lifetime warranty.</p>
                <ul>
                  <li>Key Features:</li>
                  <li>Heavy duty, pressure cast aluminium with extra thick base for quick heat up</li>
                  <li>Ceramic titanium surface with PFOA-free GreenTek non-stick coating</li>
                  <li>Fat-free frying, metal utensils safe</li>
                  <li>Suitable for all stove tops, except induction</li>
                  <li>Guaranteed not to warp</li>
                  <li>Fast and even heat distribution</li>
                  <li>Ovenproof up to 260°C</li>
                  <li>Dishwasher safe - but not recommended</li>
                  <li>Designed and manufactured in Denmark</li>
                </ul>
              </div>
            </div>
            <div id="des-details2" class="tab-pane">
              <div class="product-anotherinfo-wrapper">
                <ul>
                  <li><span>name:</span>Scanpan Classic Covered</li>
                  <li><span>color:</span>orange , pink , yellow</li>
                  <li><span>size:</span>xl, l , m , sl</li>
                  <li><span>length:</span>102cm, 110cm , 115cm</li>
                  <li><span>Brand:</span>Nike, Religion, Diesel, Monki</li>
                </ul>
              </div>
            </div>
            <div id="des-details3" class="tab-pane">
              <div v-if="commentNum == 0">No comment for now.</div>
              <div class="rattings-wrapper" v-for="comment in commentList">
                <div class="sin-rattings">
                  <div class="star-author-all">
                    <div class="product-rating f-left"></div>
                    <div class="ratting-author f-right">
                      <h3>{{comment.username}}</h3><span>{{comment.commentTime}}</span>
                    </div>
                  </div>
                  <p>{{comment.content}}</p>
                </div>
              </div>
              <p></p>
              <div class="ratting-form-wrapper" v-if="flag == 1">
                <h3>Add your Comments :</h3>
                <div class="ratting-form">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="rating-form-style form-submit">
                          <textarea name="message" placeholder="Message" v-model="myComment.content"></textarea>
                          <input type="submit" value="add review" @click="addComment"></div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="related-product-area pt-95 pb-80 gray-bg">
      <div class="container">
        <div class="section-title text-center mb-55">
          <h4>Most Populer</h4>
          <h2>Related Products</h2>
        </div>
        <div class="related-product-active owl-carousel">
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-4.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Dog Calcium Food</a></h4>
              <div class="product-price"><span class="new">$20.00</span><span class="old">$50.00</span></div>
            </div>
          </div>
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-5.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Cat Buffalo Food</a></h4>
              <div class="product-price"><span class="new">$22.00</span></div>
            </div>
          </div>
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-6.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Legacy Dog Food</a></h4>
              <div class="product-price"><span class="new">$50.00</span><span class="old">$70.00</span></div>
            </div>
          </div>
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-7.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Chicken Dry Cat Food</a></h4>
              <div class="product-price"><span class="new">$60.00</span></div>
            </div>
          </div>
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-8.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Stomach Dog Food</a></h4>
              <div class="product-price"><span class="new">$70.00</span><span class="old">$90.00</span></div>
            </div>
          </div>
          <div class="product-wrapper">
            <div class="product-img"><a href=""><img src="static/picture/product-9.jpg" alt=""></a>
              <div class="product-action"><a title="Quick View" data-toggle="modal"
                                             data-target="#exampleModal" href="#"><i class="ti-plus"></i></a><a
                title="Add To Cart"
                href="#"><i class="ti-shopping-cart"></i></a></div>
              <div class="product-action-wishlist"><a title="Wishlist" href="#"><i class="ti-heart"></i></a>
              </div>
            </div>
            <div class="product-content">
              <h4><a href="">Nourish Puppy Food</a></h4>
              <div class="product-price"><span class="new">$80.00</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import viewItem from "../../../static/js/pet/viewItem";

export default {
  ...viewItem
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
